import React, { useState } from 'react';
import PropTypes from 'prop-types';
import useCss from '../hooks/useCss';
import { isString } from 'lodash';
import { Image, ConfigProvider } from 'antd';
import { str2Locale } from './locales.react';


// 定义图片组件AntdImage，api参数参考https://ant.design/components/image-cn/
const AntdImage = (props) => {
    let {
        id,
        className,
        style,
        key,
        locale,
        width,
        height,
        src,
        fallback,
        multiImageMode,
        preview,
        setProps,
        loading_state
    } = props;

    const [visible, setVisible] = useState(false);

    // 多图片模式时
    if (Array.isArray(src)) {
        // 多图片折叠模式时
        if (multiImageMode === 'fold') {
            return (
                <ConfigProvider locale={str2Locale.get(locale)}>
                    <Image
                        id={id}
                        style={style}
                        className={
                            isString(className) ?
                                className :
                                (className ? useCss(className) : undefined)
                        }
                        key={key}
                        preview={{ visible: false }}
                        width={width}
                        height={height}
                        src={src[0]}
                        fallback={fallback}
                        onClick={() => setVisible(true)}
                    />
                    <div style={{ display: 'none' }}>
                        <Image.PreviewGroup preview={{ visible, onVisibleChange: vis => setVisible(vis) }}>
                            {src.map(
                                src_ => <Image src={src_} fallback={fallback} />
                            )}
                        </Image.PreviewGroup>
                    </div>
                </ConfigProvider>
            );
        } else {
            return (
                <ConfigProvider locale={str2Locale.get(locale)}>
                    <Image.PreviewGroup id={id}
                        style={style}
                        className={
                            isString(className) ?
                                className :
                                (className ? useCss(className) : undefined)
                        }
                        key={key}>
                        {src.map(
                            src_ => <Image src={src_} fallback={fallback} width={width} height={height} />
                        )}
                    </Image.PreviewGroup>
                </ConfigProvider>
            );
        }
    } else {
        return (
            <ConfigProvider locale={str2Locale.get(locale)}>
                <Image
                    id={id}
                    style={style}
                    className={
                        isString(className) ?
                            className :
                            (className ? useCss(className) : undefined)
                    }
                    key={key}
                    width={width}
                    height={height}
                    src={src}
                    fallback={fallback}
                    preview={preview}
                />
            </ConfigProvider>
        );
    }
}

// 定义参数或属性
AntdImage.propTypes = {
    // 组件id
    id: PropTypes.string,

    // css类名
    className: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object
    ]),

    // 自定义css字典
    style: PropTypes.object,

    // 辅助刷新用唯一标识key值
    key: PropTypes.string,

    // 设置语言环境，可选的有'zh-cn'、'en-us'
    locale: PropTypes.oneOf(['zh-cn', 'en-us']),

    // 设置图片的描述文字
    alt: PropTypes.string,

    // 设置图像宽度
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string
    ]),

    // 设置图像高度
    height: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string
    ]),

    // 设置图片源地址，单个字符串传入时为单图片模式
    // 多个字符串数组传入时为多图片切换模式
    src: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.arrayOf(PropTypes.string)
    ]),

    // 设置图像加载失败时的填充图像，默认为antd自带
    fallback: PropTypes.string,

    // 设置多张图片的展示模式，可选的有'fold'与'unfold'
    multiImageMode: PropTypes.oneOf(['fold', 'unfold']),

    // 仅单图片传入时可用，用于设置是否添加交互预览功能，默认为true
    preview: PropTypes.bool,

    loading_state: PropTypes.shape({
        /**
         * Determines if the component is loading or not
         */
        is_loading: PropTypes.bool,
        /**
         * Holds which property is loading
         */
        prop_name: PropTypes.string,
        /**
         * Holds the name of the component that is loading
         */
        component_name: PropTypes.string
    }),

    /**
     * Dash-assigned callback that should be called to report property changes
     * to Dash, to make them available for callbacks.
     */
    setProps: PropTypes.func
};

// 设置默认参数
AntdImage.defaultProps = {
    preview: true,
    multiImageMode: 'fold',
    locale: 'zh-cn',
    fallback: ``
}

export default AntdImage;